<template>
  <div class="right-top-view">
    <title-bar :titleText="titleText"></title-bar>
    <info-box :leftTopDataList="leftTopDataList"></info-box>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import InfoBox from "./common/info-box.vue";
import TitleBar from "./common/title-bar.vue";
const leftTopDataList = ref([
  [
    {
      url: "public/img/icon-group1.8696029c.png",
      text: "土壤PH:",
      number: "6.5",
    },
    {
      url: "public/img/icon-group2.dd366642.png",
      text: "盐分浓度:",
      number: "2.0%",
    },
  ],
  [
    {
      url: "public/img/icon-group3.8bd48a18.png",
      text: "土壤温度:",
      number: "20°C",
    },
    {
      url: "public/img/icon-group4.1daf4fdd.png",
      text: "土壤湿度:",
      number: "20%",
    },
  ],
  [
    {
      url: "public/img/icon-group5.229f1123.png",
      text: "有机质含量:",
      number: "3.5%",
    },
    {
      url: "public/img/icon-group6.fc624e8c.png",
      text: "氮(N)含量",
      number: "120 ppm",
    },
  ],
]);
const titleText = "土壤实时监测";
</script>

<style lang="less" scoped>
.right-top-view {
  width: 100%;
  height: 93%;
}
</style>
